<template>
  <div class="dashboard-editor-container" style="background-color: #1D1F46;" :style="{height:heightAll+'px'}">

    <div style="margin-left: auto;margin-right: auto;width: 100%;min-height: 800px;position: relative;">
        <div style="width: 100%;height: 60px;">
          <div style="width: 1500px;height: 60px;margin: auto;">
            <div style="border-bottom: #3A71A8 1px solid;height: 30px;float: left;width: 371px;"></div>
            <div style="float: left;">
              <div style="width:35px;height: 30px;"></div>
              <div style="width:35px;height:30px;box-sizing:border-box;
                background:linear-gradient(40deg, transparent 48.5%, #3A71A8 48.5%,#3A71A8 51.5%, transparent 51.5%);" ></div>
            </div>

            <div id="xg-center" >
              <div style="font-size: 30px;text-align: center;margin-top: 10px;color: #739BC3;">
                {{ indexset }}
              </div>
            </div>
            <div style="float: left;">
              <div style="width:35px;height: 30px;"></div>
              <div style="width:35px;height:30px;box-sizing:border-box;
                background:linear-gradient(-40deg, transparent 48.5%, #3A71A8 48.5%,#3A71A8 51.5%, transparent 51.5%);" ></div>
            </div>
            <div style="float: left;">
              <div style="border-bottom: #3A71A8 1px solid;height: 30px;width: 371px;"></div>
              <div style="color: #f0f0f0;padding: 3px;text-align: right;">
                <div style="float: left;">
                  <el-button
                    type="primary"
                    size="mini"
                    round
                    @click="toManage"
                  >气象数据</el-button>
                </div>
                <div style="float: left;margin-left: 10px;">
                  <el-button
                    type="primary"
                    size="mini"
                    round
                    disabled
                  >水质数据</el-button>
                </div>
                <div style="float: right;">
                  {{ nowDate }}
                </div>

              </div>
            </div>

          </div>
        </div>
        <div style="width: 1500px;height: 800px;margin: auto;" ondragstart="return false">
          <div style="float: left;width: 55px;">
            <div v-for="(collectPoint, index) in collectPointList" :key="collectPoint.id" @click="chkCollectPoint(collectPoint)"
                 :class="{breadActive: collectPoint.id==pointId}"
                 style="background-color: #c0c4cc;width: 55px;border: 2px solid #707070;padding: 3px;margin-top: 2px;font-size: 12px;cursor: pointer;">
              {{collectPoint.name}}
            </div>
          </div>
          <div style="width: 1445px;height: 800px;float: left;position:relative;" >
            <img :src="pmtUrl" style="width: 1445px;height: 800px;">

            <div v-for="pointParam in pointParamList" style="position:absolute;" :style="{top:pointParam.gyy+'px',left:pointParam.gyx+'px'}" >
              <div v-if="pointParam.paramInfo.paramType === 'num'" style="color: #ffffff;"><span v-html="realDataObj['param'+pointParam.paramId]"></span></div>
              <div v-if="pointParam.paramInfo.paramType === 'state'" style="color: #157a0c;">
                <img v-if="realDataObj['param'+pointParam.paramId] == 1" :src="stateLv" style="width: 23px;height: 23px;"/>
                <img v-else :src="stateHui" style="width: 23px;height: 23px;"/>
              </div>
              <div v-if="pointParam.paramInfo.paramType === 'fault'" style="color: #157a0c;">
                <img v-if="realDataObj['param'+pointParam.paramId] == 1" :src="faultLv" style="width: 40px;height: 40px;"/>
                <img v-else :src="faultHui" style="width: 40px;height: 40px;"/>
              </div>
              <div v-if="pointParam.paramInfo.paramType === 'crol'" style="color: #157a0c;">
                <img v-if="realDataObj['param'+pointParam.paramId] == 1" :src="crolLv" style="width: 30px;height: 30px;"/>
                <img v-else :src="crolHui" style="width: 30px;height: 30px;"/>
              </div>
            </div>
          </div>
        </div>

    </div>

  </div>
</template>

<script>
  import { listCollectPointAndStatus } from "@/api/basic/collectPoint";
  import { getSysConfig } from "@/api/basic/sysConfig";
  import { queryPointParams } from "@/api/basic/pointParam";
  import { queryRealOri } from "@/api/basic/hisMain";
  const defaultSettings = require('@/settings.js');

  export default {
    name: "RelFace",
    components: {

    },
    data() {
      return {
        pointId:null,
        stateHui:require('@/assets/image/state_hui.png'),
        stateLv:require('@/assets/image/state_lv.png'),
        faultHui:require('@/assets/image/fault_hui.png'),
        faultLv:require('@/assets/image/fault_lv.png'),
        crolHui:require('@/assets/image/crol_hui.png'),
        crolLv:require('@/assets/image/crol_lv.png'),
        sysName: defaultSettings.title,
        pmtUrl:require('@/assets/image/pmt.png'),
        indexset:'浙江省淡水研究所德清基地信息化服务平台',
        sysConfig:{},
        collectPointList:[],
        pointParamList:[],
        realDataObj:{},
        nowDate: "", // 当前日期
        heightAll: 0,
        aInterval:null,
        bInterval:null,
      };
    },
    created() {
      if(document.body.clientHeight <= 860){
        this.heightAll = 860;
      }else{
        this.heightAll = document.body.clientHeight
      }
      this.initWindow();
      this.querySysConfig();
      this.getList();
    },
    methods: {
      initWindow() {
        let _this = this
        window.onresize = () => {
          return (() => {
            if(document.body.clientHeight <= 860){
              _this.heightAll = 860;
            }else{
              _this.heightAll = document.body.clientHeight
            }

          })()
        }
      },
      chkCollectPoint(collectPoint){
        this.pointId = collectPoint.id;
        this.pmtUrl = collectPoint.gypic;
        this.getPointParams(collectPoint.id);
        this.getRealData(collectPoint.id);
      },
      getPointParams(pointId) {
        this.pointParamList = [];
        queryPointParams({pointId:pointId,isgy:'Y'}).then(response => {
          this.pointParamList = response.data;
        });
      },
      /** 查询测点管理列表 */
      getList() {
        listCollectPointAndStatus({isgy:'Y'}).then(response => {
          this.collectPointList = response.collectPoints;
          if(this.collectPointList.length>0){
            this.chkCollectPoint(this.collectPointList[0]);
          }
        });
      },
      getRealData(){
        this.realDataObj = {};
        if(this.pointId){
          queryRealOri({pointId:this.pointId}).then(response => {
            this.realDataObj = response.data;
          });
        }
      },
      toManage(){
        this.$router.push('/breedManage')
      },
      querySysConfig(){
        getSysConfig().then(response => {
          if(response.data.relPmtPic!=undefined && response.data.relPmtPic){
            this.sysConfig = response.data;
            this.indexset = response.data.indexset;

          }
        });
      },
      currentTime() {
        this.aInterval = setInterval(this.formatDate, 500);
        this.bInterval = setInterval(this.getRealData, 60*1000);
      },
      formatDate() {
        let date = new Date();
        let year = date.getFullYear(); // 年
        let month = date.getMonth() + 1; // 月
        let day = date.getDate(); // 日
        let week = date.getDay(); // 星期
        let weekArr = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];
        let hour = date.getHours(); // 时
        hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
        let minute = date.getMinutes(); // 分
        minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
        let second = date.getSeconds(); // 秒
        second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
        this.nowDate = `${year}/${month}/${day} ${hour}:${minute}:${second} ${weekArr[week]}`;
      }

    },
    mounted() {
      this.currentTime();
    },
// 销毁定时器
    beforeDestroy() {
      if (this.aInterval) {
        clearInterval(this.aInterval); // 在Vue实例销毁前，清除时间定时器
      }
      if (this.bInterval) {
        clearInterval(this.bInterval); // 在Vue实例销毁前，清除时间定时器
      }
    }

  }
</script>
<style rel="stylesheet/scss" lang="scss">
  .breadActive{
    color: red;
  }
  #xg-center{
    float: left;
    left: 665px;
    width:688px;
    height:60px;
    box-sizing:border-box;
    border-bottom: 1px solid #3A71A8;
    /*background:linear-gradient(70deg, transparent 49.5%, deeppink 49.5%,
      deeppink 50.5%, transparent 50.5%);*/
  }

</style>

